<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编译中梦见未来</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="channel">
        bilibili 编译中梦见未来
    </div>
    <div class="container">
        <div class="line" style="--color:#ec3e27;--x:3;--z:3;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:3;--z:2;--d:2;"></div>
        <div class="line" style="--color:#fff;--x:4;--z:1;--d:3;"></div>
        <div class="line" style="--color:#fd79a8;--x:4;--z:0;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:6;--z:-1;--d:2;"></div>
        <div class="line" style="--color:#0984e3;--x:6;--z:-2;--d:3;"></div>
        <div class="line" style="--color:#fff;--x:8;--z:-3;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:10;--z:-4;--d:2;"></div>
        <div class="line" style="--color:#fff;--x:12;--z:-5;--d:3;"></div>
        <div class="line" style="--color:#fff;--x:14;--z:-6;--d:1;"></div>
        <div class="line" style="--color:#fff;--x:16;--z:-7;--d:2;"></div>
        <div class="line" style="--color:#fff;--x:18;--z:-8;--d:3;"></div>
        <div class="line" style="--color:#e056fd;--x:20;--z:-9;--d:1;"></div>
    </div>

    <script>
        // // 提前写好的要给代码可以通过鼠标控制perspective-origin
        // // 这个属性可以让你从不同视角查看3d变换
        // // 容器
        // let container = document.querySelector('.container');

        // // 可是区域大小
        // let window_width = document.documentElement.clientWidth;
        // let window_height = document.documentElement.clientHeight;
        // // console.log(window_width, window_height);

        // // 监听鼠标移动事件，获取鼠标位置，计算鼠标在屏幕中的百分比
        // container.addEventListener('mousemove', (e) => {
        //     // 鼠标坐标
        //     let left = e.clientX;
        //     let top = e.clientY;
        //     // 百分比
        //     let left_p = left / window_width * 100;
        //     let top_p = top / window_height * 100;
        //     // 透视基点
        //     container.style.perspectiveOrigin = left_p + "% " + top_p + "%";
        // });

    </script>

</body>

</html>